<template>
  <view class="examine">
    <view class="title">
      {{title}}
    </view>
    <view class="topic">
      <view class="test" v-for="(item,num) in test_paper" :key="item.title">
        <view class="test_title">
          {{num+1}}、{{item.title}}
        </view>
      <u-radio-group v-model="item.answer" placement="column">
          <u-radio :customStyle="{marginBottom: '8px'}" v-for="(option, index) in item.section" :key="index"
            :label="option.name" :name="option.name" @change="radioChange" class="options" v-model="item.answer"
            :disabled="isCommit === true && option.name !== item.answer"
            :activeColor="changeColor(option.name,item.rightOption)"
            >
          </u-radio>
      </u-radio-group>
      </view>
    </view>
    <button @click="commit" v-if="!isCommit">提交</button>
    <button @click="reDo" v-if="isCommit">重做</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isCommit:false,
        title:'数据库系统',
        test_paper: [{
            id: 7001001,
            title: '计算机执行程序时，CPU 中（ ）的内容是一条指令的地址。',
            rightOption: '程序计数器',
            answer:'',
            section: [{
                name: '运算器',
                disabled: false
              },
              {
                name: '控制器',
                disabled: false
              },
              {
                name: '程序计数器',
                disabled: false
              },
              {
                name: '通用寄存器',
                disabled: false
              },
            ]
          },
          {
            id: 7001002,
            title: 'DMA 控制方式是在（ ）之间直接建立数据通路进行数据的交换处理。',
            rightOption: '主存与外设',
            answer:'',
            section: [{
                name: 'CPU 与主存',
                disabled: false
              },
              {
                name: 'CPU 与外设',
                disabled: false
              },
              {
                name: '主存与外设',
                disabled: false
              },
              {
                name: '外设与外设',
                disabled: false
              },
            ]
          }
        ],
        select: ''
      };
    },
    methods: {
      radioChange(n) {
        console.log('radioChange', n);
      },
      // 判断对错时选框的颜色
      changeColor(left,right){
        if(this.isCommit === false) {
          return "#55aaff"
        } else {
          return left === right ?  'green' :  'red'
        }
      },
      // 提交按钮
      commit() {
        let _this = this
        this.test_paper.filter(item=> {
          if(item.answer === '') {
            uni.showToast({
              duration:1000,
              icon:'error',
              title:'还有题未作答哦',
            })
          } else {
            uni.showToast({
              duration:1000,
              icon:'loading',
              title:"正在提交",
              success() {
                _this.isCommit = true
              }
            })
          }
        })
      },
      // 重做按钮
      reDo(){
        this.test_paper.forEach(item=> {
          item.answer = ''
        })
        this.isCommit = false
      }
    },
  }
</script>

<style lang="less">
  page {
    background-color: #fff;
  }

  .examine {
    padding: 20rpx;

    .title {
      font-size: 48rpx;
      font-weight: 600;
  } 

    .topic {
      margin-top: 30rpx;

      .test {
        margin-bottom: 20rpx;
        padding: 10rpx 20rpx 20rpx 20rpx;
        border-radius: 30rpx;
        box-shadow: 2rpx 2rpx 4rpx 4rpx #e2e2e2;

        .test_title {
          margin-bottom: 20rpx;
        }
      }
    }
    button {
      color: #fff;
      background-color: #55aaff;
    }
  }
</style>
